<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.studentName" placeholder="学员姓名" clearable></el-input>
      </el-form-item>
      <el-select v-model="dataForm.male" placeholder="学员性别" style="width:150px;height:50px">
        <el-option v-for="(item, index) in maleoPtions" :label="item.label" :key="item.value" :value="item.value"></el-option>
      </el-select>
      <el-select v-model="dataForm.classroomStatus" placeholder="课堂状态" style="width:150px;height:50px">
        <el-option v-for="(item, index) in classroomPtions" :label="item.label" :key="item.value" :value="item.value"></el-option>
      </el-select>
      <el-select v-model="dataForm.attendanceStatus" placeholder="考勤状态" style="width:150px;height:50px">
        <el-option v-for="(item, index) in attendancePtions" :label="item.label" :key="item.value" :value="item.value"></el-option>
      </el-select>
      <el-select v-model="dataForm.isUnsubscribe" placeholder="是否退订" style="width:150px;height:50px">
        <el-option v-for="(item, index) in isUnsubscribePtions" :label="item.label" :key="item.value" :value="item.value"></el-option>
      </el-select>
      <el-form-item>
        <el-date-picker v-model="dataForm.selDate" type="daterange" value-format="yyyy-MM-dd" align="right"
          unlink-panels range-separator="至" start-placeholder="试听开始日期" end-placeholder="试听结束日期" :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="dataForm.selDateOne" type="daterange" value-format="yyyy-MM-dd" align="right"
          unlink-panels range-separator="至" start-placeholder="预约开始日期" end-placeholder="预约结束日期" :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-select v-model="dataForm.registrationIntention" placeholder="报名意向度" style="width:150px;height:50px">
        <el-option v-for="(item, index) in registrationIntentionPtions" :label="item.label" :key="item.value" :value="item.value"></el-option>
      </el-select>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button @click="reload()" type="success">刷新</el-button>
       <!-- <el-button v-if="isAuth('generator:studentmanage:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
        <el-button v-if="isAuth('generator:studentmanage:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> -->
      </el-form-item>
    </el-form>
    <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
      <el-table-column type="selection" header-align="center" align="center" width="50">
      </el-table-column>
      <el-table-column prop="studentName" header-align="center" align="center" label="学员姓名">
      </el-table-column>
      <el-table-column prop="studentId" header-align="center" align="center" label="学员ID">
      </el-table-column>
      <el-table-column prop="parentPhone" :formatter="parentPhoneFormatter" header-align="center" align="center" label="手机号">
      </el-table-column>
      <el-table-column prop="consultant" header-align="center" align="center" label="课程顾问">
      </el-table-column>
      <el-table-column prop="auditionTime" header-align="center" align="center" label="试听时间">
      </el-table-column>
      <el-table-column prop="classroomStatus" :formatter="classroomStatusFormatter" header-align="center" align="center" label="课堂状态">
      </el-table-column>
      <el-table-column prop="attendanceStatus" :formatter="attendanceStatusFormatter" header-align="center" align="center" label="考勤状态">
      </el-table-column>
      <el-table-column prop="appointmentPerson" header-align="center" align="center" label="预约人">
      </el-table-column>
      <el-table-column prop="appointmentTime" header-align="center" align="center" label="预约时间">
      </el-table-column>
      <el-table-column prop="registrationIntention" :formatter="registrationIntentionFormatter" header-align="center" align="center" label="报名意向度">
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <!-- <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
          <el-button type="text" size="small" @click="informationHandle(scope.row.id)">学员详情</el-button>
          <el-button type="text" size="small" @click="addFollowHandle(scope.row)">预约跟进</el-button>
          <el-button type="text" size="small" @click="followRecordHandle(scope.row.studentId)">跟进记录</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button> -->
          <el-dropdown>
            <span style="cursor: pointer;color: #17B3A3; font-size: 13px;">
              跟进<i class="el-icon-arrow-down" style=" font-size: 9px;"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><el-button type="text" size="small" @click="addFollowHandle(scope.row)">预约跟进</el-button></el-dropdown-item>
              <el-dropdown-item><el-button type="text" size="small" @click="followRecordHandle(scope.row.studentId)">跟进记录</el-button></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown>
            <span style="cursor: pointer;color: #17B3A3; font-size: 13px;margin-left: 0.6rem;">
              更多<i class="el-icon-arrow-down" style=" font-size: 9px;"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><el-button type="text" size="small" @click="informationHandle(scope.row.id)">学员详情</el-button></el-dropdown-item>
              <el-dropdown-item><el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button></el-dropdown-item>
              <el-dropdown-item><el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <!-- 弹窗, 新增预约跟进 -->
    <add-follow v-if="addFollowVisible" ref="addFollow"></add-follow>
    <!-- 学员详情 -->
    <information v-if="informationVisible" ref="information" @refreshDataList="getDataList"></information>
    <!-- 跟进记录 -->
    <followRecord v-if="followRecordVisible" ref="followRecord"></followRecord>
  </div>
</template>

<script>
  import AddOrUpdate from './studentmanage-add-or-update'
  import AddFollow from './studentmanagefollow-add-or-update'
  import Information from './studentmanage-information'
  import FollowRecord from './studentmanagefollow-record'
  export default {
    data () {
      return {
        dataForm: {
          studentName: '',
          male: '',
          classroomStatus: '',
          attendanceStatus: '',
          isUnsubscribe: '',
          registrationIntention: '',
          selDate: [],
          selDateOne: []
        },
        maleoPtions: [{
          value: '0',
          label: '女'
        }, {
          value: '1',
          label: '男'
        }, {
          value: '2',
          label: '保密'
        }],
        classroomPtions: [{
          value: '0',
          label: '未开始'
        }, {
          value: '1',
          label: '正在进行'
        }, {
          value: '2',
          label: '已结束'
        }, {
          value: '3',
          label: '已取消'
        }],
        attendancePtions: [{
          value: '0',
          label: '缺席'
        }, {
          value: '1',
          label: '出席'
        }, {
          value: '2',
          label: '迟到'
        }],
        isUnsubscribePtions: [{
          value: '0',
          label: '未退订'
        }, {
          value: '1',
          label: '已退订'
        }],
        registrationIntentionPtions: [{
          value: '0',
          label: '未标记'
        }, {
          value: '1',
          label: '无'
        }, {
          value: '2',
          label: '低'
        }, {
          value: '3',
          label: '中'
        }, {
          value: '4',
          label: '高'
        }],
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick: function (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三天',
            onClick: function (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近七天',
            onClick: function (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        addFollowVisible: false,
        informationVisible: false,
        followRecordVisible: false
      }
    },
    components: {
      AddOrUpdate,
      AddFollow,
      Information,
      FollowRecord
    },
    activated () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/generator/studentmanage/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'studentStage': 1,
            'studentName': this.dataForm.studentName,
            'male': this.dataForm.male,
            'classroomStatus': this.dataForm.classroomStatus,
            'attendanceStatus': this.dataForm.attendanceStatus,
            'isUnsubscribe': this.dataForm.isUnsubscribe,
            'registrationIntention': this.dataForm.registrationIntention,
            'startAuditionTime': this.dataForm.selDate[0],
            'entAuditionTime': this.dataForm.selDate[1],
            'startAppointmentTime': this.dataForm.selDateOne[0],
            'entAppointmentTime': this.dataForm.selDateOne[1]
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
          this.$refs.addOrUpdate.getStudentList()
        })
      },
      // 学员详情
      informationHandle (id) {
        this.informationVisible = true
        this.$nextTick(() => {
          this.$refs.information.init(id)
        })
      },
      // 新增预约跟进学员
      addFollowHandle (row) {
        console.log(row)
        this.addFollowVisible = true
        this.$nextTick(() => {
          this.$refs.addFollow.getids(row.studentId, row.id, row.studentName)
        })
      },
      // 跟进记录
      followRecordHandle (studentId) {
        this.followRecordVisible = true
        this.$nextTick(() => {
          this.$refs.followRecord.getDataList(studentId)
        })
      },
      // 删除
      deleteHandle (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/generator/studentmanage/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({
            data
          }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      // 刷新
      reload () {
        this.dataForm.studentName = ''
        this.dataForm.male = ''
        this.dataForm.classroomStatus = ''
        this.dataForm.attendanceStatus = ''
        this.dataForm.isUnsubscribe = ''
        this.dataForm.registrationIntention = ''
        this.dataForm.selDate = []
        this.dataForm.selDateOne = []
        this.getDataList()
      },
      // 格式化报名意向度
      registrationIntentionFormatter (row, column) {
        let registrationIntention = row.registrationIntention
        if (registrationIntention === 0) {
          return '未标记'
        } else if (registrationIntention === 1) {
          return '无'
        } else if (registrationIntention === 2) {
          return '低'
        } else if (registrationIntention === 3) {
          return '中'
        } else if (registrationIntention === 4) {
          return '高'
        } else {
          return ''
        }
      },
      // 格式化课堂状态
      classroomStatusFormatter (row, column) {
        let classroomStatus = row.classroomStatus
        if (classroomStatus === 0) {
          return '未开始'
        } else if (classroomStatus === 1) {
          return '正在进行'
        } else if (classroomStatus === 2) {
          return '已结束'
        } else if (classroomStatus === 3) {
          return '已取消'
        } else {
          return ''
        }
      },
      // 格式化考勤状态
      attendanceStatusFormatter (row, column) {
        let attendanceStatus = row.attendanceStatus
        if (attendanceStatus === 0) {
          return '缺席'
        } else if (attendanceStatus === 1) {
          return '出席'
        } else if (attendanceStatus === 2) {
          return '迟到'
        } else {
          return ''
        }
      },
      // 格式化手机号
      parentPhoneFormatter (row, column) {
        return row.parentPhone.replace(/^(.{3}).*(.{4})/, '$1****$2')
      }
    }
  }
</script>
